<!--

* description: 备件选择

* author:ss

* createdDate:2020-1-25

-->

<template>
  <section class="editAreaAudit">
    <el-dialog
      v-dialogDrag
      :visible="popupsVisible"
      width="75%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeEdit"
    >
      <dialogHeader
        slot="title"
        :title="titleName"
        :style-type="$store.state.app.dialogType"
      />

      <div class="fixHeight">
        <div class="app-container app-container-table">
          <one-table-template
            ref="multipleTable"
            :dynamic-buttons="tableButtons"
            :dynamic-components="tableComponents"
            :dynamic-api-config="dynamicApiConfigs"
            :dynamic-table-cols="tableCols"
            :dynamic-form-fields="formField"
            :dynamic-is-show-select="true"
            :dynamic-is-init-table="true"
            :dynamic-is-fix-choose="false"
            :dynamic-is-fix-index="false"
            :dynamic-is-show-more-btn="true"
            :dynamic-api-style="'restful'"
            :dynamic-table-defult-height="300"
            :isShowPagination="false"
          />
        </div>
      </div>

      <div class="fixHeight">
        <div class="filter-container filter-params">
          <h3 :style="styleObj" class="filter-container filter-title">
            替换件信息
          </h3>
          <one-table-template
            ref="multipleTable"
            :dynamic-api-config="apiConfig"
            :dynamic-table-cols="tableCols2"
            :dynamic-form-fields="formField"
            :dynamic-is-show-select="false"
            :dynamic-is-show-more-btn="false"
            :callback-obj="callbackObj"
            :dynamic-api-style="'restful'"
            :dynamic-table-defult-height="300"
            :isShowPagination="false"
          />
        </div>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { oneTableWithViewTemplateMixins } from "@/components/mixins/oneTableWithViewTemplateMixins";

import { formMixins } from "@/components/mixins/formMixins";

import OneTableTemplate from "@/components/templates/oneTable";

import api from "@/api/subsidyManage";

export default {
  components: {
    OneTableTemplate,

    // inEdit,

    dialogHeader: () => import("@/components/dialogHeader")
  },

  // 组件混入对象

  mixins: [oneTableWithViewTemplateMixins, formMixins],

  props: {
    dataForForm: {
      type: Object,

      default: () => {}
    },

    isDialogVisible: {
      type: Boolean,

      default: false
    }
  },

  data() {
    const viewPageCode = "areaAudit-edit";

    return {
      editRowData: {},

      editPopupsState: "",

      editPopupsVisible: false,

      dynamicTags: [],

      inputValue: "",

      inputVisible: false,

      titleName: "备件选择",

      inEditPopupsState: "",

      inEditRowData: {},

      inEditPopupsVisible: false,

      apiConfig: api.queryLog,

      // 动态组件-按钮
      tableButtons: [
        {
          compKey: "btnKey1",
          type: "primary",
          size: "small",
          clickEvent: () => this.queryTable(1),
          text: this.$t("sys.button.query"), // 查询
          name: "search", // 按钮图标样式
          position: "right",
          fuzzySearch: true
        },
        {
          compKey: "btnKey4",
          type: "",
          size: "small",
          clickEvent: () => this.reset(),
          text: this.$t("sys.button.reset"),
          name: "reset",
          position: "right" // 重置
        },
        {
          compKey: "btnKey4",
          type: "",
          size: "small",
          clickEvent: () => this.reset(),
          text: "选择",
          name: "",
          position: "right" // 重置
        }
      ],

      // 动态组件-查询条件
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
              {
                prop: "vin",
                label: "备件编码",
                align: "center"
              },
              {
                prop: "moveStateCn",
                label: "备件名称",
                align: "center"
              },
              {
                prop: "isCarState",
                label: "单价",
                align: "center"
              },
              {
                prop: "hostLimitrEasonCn",
                label: "库存数量",
                align: "center"
              },
              {
                prop: "assignState",
                label: "可用库存",
                align: "center"
              },
              {
                prop: "hostQualityStateCn",
                label: "包装含量",
                align: "center"
              },
              {
                prop: "hostQualityStateCn",
                label: "备件类别",
                align: "center"
              },
              {
                prop: "hostQualityStateCn",
                label: "适用车型",
                align: "center"
              }
            ],
      // 动态组件-查询条件
      tableCols2:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
              {
                prop: "vin",
                label: "备件编码",
                align: "center"
              },
              {
                prop: "moveStateCn",
                label: "备件名称",
                align: "center"
              },
              {
                prop: "isCarState",
                label: "单价",
                align: "center"
              },
              {
                prop: "hostLimitrEasonCn",
                label: "库存数量",
                align: "center"
              },
              {
                prop: "assignState",
                label: "可用库存",
                align: "center"
              },
              {
                prop: "hostQualityStateCn",
                label: "包装含量",
                align: "center"
              },
              {
                prop: "hostQualityStateCn",
                label: "备件类别",
                align: "center"
              }
            ],

      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
              .tableComponents
          : [
              {
                compKey: "compKey1",

                labelName: "备件编码：",

                codeField: "qualifiedCertNo",

                component: () => import("@/components/org/commonInput"),

                type: "inputText",
                span: 8,
                isMust: true
              },

              {
                compKey: "compKey2",

                labelName: "备件名称：",

                codeField: "produceDate",

                component: () => import("@/components/org/commonInput"),

                type: "inputText",
                span: 8,
                isMust: true
              },

              {
                compKey: "compKey3",

                labelName: "备件类别：",

                codeField: "carConfigCn",

                component: () => import("@/components/org/commonInput"),

                type: "inputText",
                span: 8,
                isMust: true
              },

              {
                compKey: "compKey3",

                labelName: "车系：",

                codeField: "carConfigCn",

                component: () => import("@/components/org/commonInput"),

                type: "inputText",
                span: 8,
                isMust: true
              },
              {
                compKey: "compKey3",

                labelName: "车型：",

                codeField: "carConfigCn",

                component: () => import("@/components/org/commonInput"),

                type: "inputText",
                span: 8,
                isMust: true
              },

              {
                compKey: "compKey7",
                labelName: "可用库存数量大于0",
                codeField: "aaa",
                lookuptype: "VE0212",
                component: () => import("@/components/org/checkBox"),
                type: "inputText",
                isMust: true,
                span: 8
              }
            ],

      // 标题

      textMap: {
        edit: "区域审核"
      },

      // 表单数据（无需赋值，由混入对象赋值）

      formField: this.$utils.getFormField(
        this,

        {},

        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      )
    };
  },

  created() {
    this.formField = this.dataForForm;
  },

  methods: {
    // 关闭弹窗

    closeEdit() {
      this.$emit("close");
    },

    // 审核通过

    inEdit() {
      this.queryTable(1);

      this.inEditPopupsState = "审核通过";

      this.inEditPopupsVisible = true;
    },

    // 审核驳回

    reject() {
      this.queryTable(1);

      this.inEditPopupsState = "审核驳回";

      this.inEditPopupsVisible = true;
    },

    // 关闭审核/驳回弹窗

    closeInEdit() {
      this.inEditPopupsVisible = false;

      this.closeEdit();
    },

    queryTableon() {
      this.queryTable(1);

      this.inEditPopupsVisible = false;
    },

    showInput() {
      // debugger

      this.editPopupsVisible = true;

      // this.$nextTick(_ => {

      //   this.$refs.saveTagInput.$refs.input.focus();

      // });
    },

    // 点击选择标签

    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;

      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }

      this.inputVisible = false;

      this.inputValue = "";
    }
  },

  //监听标签值

  watch: {
    dynamicTags(value) {
      let val = value.join(",");

      var parent = this.$utils.getHasFormFieldParentComponent(this);

      parent.formField[this.codeField] = val;

      this.$emit("changeCode", value);
    },

    getVal(xzz) {
      let val = [];

      this.dynamicTags = xzz.split(",");
    }
  }
};
</script>

<style lang="scss" scoped>
>>> div.fixHeight {
  max-height: 500px;

  overflow-y: auto;

  overflow-x: hidden;
}

h3 {
  padding-left: 1%;

  text-align: left;

  font-weight: 600;

  transition: 1s;

  transition-timing-function: cubic-bezier(0.66, 0.3, 0.08, 1.41);

  opacity: 1;

  text-shadow: #c0c4cc 3px 3px 2px;

  /*transform-style: preserve-3d;*/

  /*transform: perspective(900px) translateZ(0) translateX(0);*/
}

/*h3.showit {*/

/*  padding-left: 30%;*/

/*  text-align: left;*/

/*  font-weight: 600;*/

/*  opacity: .3;*/

/*}*/

h3 button.el-button {
  float: right;

  margin-right: 10px;
}

div.filter-container {
  // margin-bottom: 35px;
}

>>> .el-table .warm-row {
  background: #eedbae;
}

.filter-container.filter-title::before {
  border-left: 4px solid #0075ff;

  padding-right: 10px;

  height: 20px;

  left: 0px;

  top: 4px;
}

.fixHeight::v-deep .el-checkbox {
  width: 100%;
}
.styleButon {
  height: 24px;
}
.fixHeight::v-deep #searchFormGroup .el-row .el-col .el-col label {
  max-width: 120px !important;
}
</style>
